<template>
  <div class="app-list-container" v-loading="loading">
    <div class="search-box">
      <el-input v-model="listQuery.title" placeholder="流程名称" style="width: 250px;margin-right: 15px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.name" placeholder="客户名称" style="width: 250px;margin-right: 15px" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-button  class="filter-item" type="primary" :icon="Search" @click="handleFilter">搜索</el-button>
    </div>
    <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%;" @sort-change="sortChange">
      <el-table-column type="expand">
        <template #default="props">
          <flow-info :key="props.row.id" :vid="props.row.id" />
        </template>
      </el-table-column>
      <!-- <el-table-column label="ID" prop="id" align="center" width="80" :class-name="getSortClass('id')">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="流程名称" prop="title" width="300px" align="left" />
      <el-table-column label="简介" prop="note" align="left" />
      <el-table-column label="上线时间" prop="date" width="200px" align="center" />
      <el-table-column label="节点数量" prop="num" width="120px" align="center" />
      <el-table-column label="执行时间" prop="time" width="120px" align="center" />
    </el-table>
  </div>
</template>
<script setup>
import { Search } from '@element-plus/icons-vue';
import FlowInfo from './components/flowInfo';
import { tableData } from './data/data'
import {onMounted, ref} from "vue";
const loading = ref(false);
const listLoading = ref(true)
const listQuery = ref({
  page: 1,
  limit: 20,
  title: undefined,
  name: ''
})
const tableKey = ref(0)
const total = ref(0)
const list = ref([])
const getList = ()=>{
  list.value = tableData();
  total.valuem = list.value.length
  listLoading.value = false
}
const handleFilter = ()=>{
  listQuery.value.page = 1
  getList()
}
onMounted(()=>{
  getList()
})
</script>
<style  lang="scss" scoped>
.search-box {
  padding: 18px;
  display: flex;
  background: #fff;
  margin-bottom: 10px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  .search {
    max-width: 400px;
    margin-bottom: 20px;
    text-align: right;
  }
}
</style>